<template>
  <a-modal v-model:visible="visibleTransfer" :title="$t('调单')" width="65%" :footer="false" @cancel="close()">
    <a-form layout="vertical">
      <a-row :gutter="24">
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('平台订单号')">
            <a-input v-model:value="page.platOrderId" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('商户订单号')">
            <a-input v-model:value="page.orderId" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('客户名字')">
            <a-input v-model:value="page.userName" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('身份证号码')">
            <a-input v-model:value="page.idCard" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('银行名称')">
            <a-input v-model:value="page.bankName" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('收款账号')">
            <a-input v-model:value="page.bankNo" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item label="cci">
            <a-input v-model:value="page.cci" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('打款员')">
            <a-select v-model:value="page.adminUserName" allowClear>
              <a-select-option v-for="item in paySystemUserList" :key="item.systemUserId" :value="item.systemUserId">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :xs="24">
          <a-form-item :label="$t('分配状态')">
            <a-select v-model:value="page.isAssign" allowClear>
              <a-select-option :value="1">{{ $t('已分配') }}</a-select-option>
              <a-select-option :value="0">{{ $t('未分配') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :xs="24">
          <a-form-item :label="$t('分单时间')">
            <a-range-picker style="width: 100%" v-model:value="page.createTime" valueFormat="YYYY-MM-DD"
                            format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
          <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div style="margin-top: 15px;text-align: right">
      <a-button type="primary" @click="distribution('select')">{{ $t('所选分配') }}</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="distribution('search')">{{ $t('所搜分配') }}</a-button>
    </div>
    <div style="margin-top: 15px">
      <a-table row-key="id" :data-source="tableData" :scroll="{x:1000}" :columns="tableColumn" :pagination="pagination"
               :row-selection="{selectedRowKeys: orderRowSelection,onChange:(value)=>{
        orderRowSelection = value
      }}">
      </a-table>
    </div>
    <a-modal v-model:visible="visibleDistribution.isShow" :title="visibleDistribution.title" width="50%"
             @cancel="userClose()" @ok="distributionConfirm">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('员工姓名')">
              <a-input v-model:value="userPage.name" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('账号')">
              <a-input v-model:value="userPage.account" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label=" ">
              <a-button type="primary" @click="getUser">{{ $t('查询') }}</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-table row-key="systemUserId" :scroll="{y:600}" :data-source="userTableData" :columns="userTableColumn"
                 :pagination="false"
                 :row-selection="{selectedRowKeys: userRowSelection,onChange:(value)=>{
        userRowSelection = value
      }}">
        </a-table>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script>
import {reactive, watch, toRefs, onMounted, computed} from 'vue'
import {paymentSearchTransfer, paymentSelectTransfer, fetchPaymentTransferList} from "../../../../api/payment";
import {selectPaySystemUser} from "../../../../api/system"
import i18n from "../../../../locale";

const $t = i18n.global.t
import {message} from "ant-design-vue"

const tableColumn = [
  {title: $t('平台订单号'), dataIndex: 'platOrderId', width: 100, align: 'center'},
  {title: $t('商户订单号'), dataIndex: 'orderId', width: 100, align: 'center'},
  {title: $t('客户名字'), dataIndex: 'userName', width: 100, align: 'center'},
  {title: $t('身份证号码'), dataIndex: 'idCard', width: 150, align: 'center'},
  {title: $t('银行名称'), dataIndex: 'bankName', width: 150, align: 'center'},
  {title: $t('收款账号'), dataIndex: 'bankNo', width: 100, align: 'center'},
  {title: 'cci', dataIndex: 'cci', width: 100, align: 'center'},
  {title: $t('分单时间'), dataIndex: 'createTime', width: 100, align: 'center'},
  {title: $t('打款员'), dataIndex: 'adminUserName', width: 100, align: 'center'},
]
const userTableColumn = [
  {title: $t('员工姓名'), dataIndex: 'name', width: 100, align: 'center'},
  {title: $t('账号'), dataIndex: 'account', width: 100, align: 'center'},
]
export default {
  props: ['visibleTransfer'],
  name: "transferOrder",
  setup(props, {emit}) {
    const state = reactive({
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        isAssign: 1
      },
      paySystemUserList: [],
      tableData: [],
      visibleDistribution: {
        isShow: false,
        title: '',
        type: ''
      },
      orderRowSelection: [],
      userRowSelection: [],
      userTableData: [],
      userPage: {}
    })
    watch(() => props.visibleTransfer, (value) => {
      if (value) {
        selectPaySystemUser({pageNum: 1, pageSize: 1000}).then(res => {
          state.paySystemUserList = res.data.list
        })
        methods.getTableData()
      }
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (value) => {
        state.page.pageNum = value
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        const [assignOrderTimeStart, assignOrderTimeEnd] = state.page.createTime || []
        const params = {
          ...state.page,
          assignOrderTimeStart, assignOrderTimeEnd,
          createTime: undefined,
        }
        const res = await fetchPaymentTransferList(params)
        if (res.code === 200) {
          const {total, list} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        }
        methods.getTableData()
      },
      close() {
        state.page = {
          pageSize: 10,
          pageNum: 1,
          total: 0,
          isAssign: 1
        }
        state.orderRowSelection = []
        emit('update:visibleTransfer', false)
      },
      // 获取员工
      getUser() {
        selectPaySystemUser({pageNum: 1, pageSize: 1000, ...state.userPage}).then(res => {
          state.userTableData = res.data.list || []
        })
      },
      userClose() {
        state.userRowSelection = []
        state.userPage = {}
      },
      distribution(type) {
        if (type === 'select') {
          if (state.orderRowSelection.length === 0) return message.error($t('请选择订单'))
        }
        state.visibleDistribution = {
          type: type,
          isShow: true,
          title: type === 'search' ? $t('所搜分配') : $t('所选分配')
        }
        methods.getUser()
      },
      // 分配提交
      async distributionConfirm() {
        console.log(state)
        if (state.userRowSelection.length === 0) return message.error($t('请选择员工'))

        const isSearch = state.visibleDistribution.type === 'search'
        let params = {}
        if (isSearch) {
          //   所搜分配
          params = {
            ...state.page,
            adminUserIdList: state.userRowSelection
          }
        } else {
          //   所选分配
          params = {
            adminUserIdList: state.userRowSelection,
            payOrderIdList: state.orderRowSelection
          }
        }
        const api = (params) => isSearch ? paymentSearchTransfer(params) : paymentSelectTransfer(params)
        const res = await api(params)
        if (res.code === 200) {
          message.success($t('操作成功'))
          methods.getTableData()
          state.visibleDistribution = false
        }
      }
    }
    return {
      pagination,
      tableColumn,
      userTableColumn,
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>
